<template>
	<div class="play-warp">
	<div class="header">
		<div class="reHome">
			<a href="/home">首页</a>
		</div>
		<span>
			<a href="/shop/findeNew" >视频</a>
		</span>
		<span class="tactive">
			<router-link to="/backPlayList">直播</router-link>
		</span>
	</div>

	<div class="play-tab">
		<router-link id="listTab" class="tab-nav tabBg" to="/"><i></i>当家直播</router-link>
		<router-link id="backPlayListTab" class="tab-nav tabBg active" to="/backPlayList"><i></i>精彩回放</router-link>
	</div>
	<div class="play-list" v-infinite-scroll="getList" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
		<div class="play-box" v-for="item in newList">
			<div class="play-row">
				<router-link class="play-item" :style="{ background: 'url('+item.cover_url+') center no-repeat', backgroundSize: '100%'}" v-for="(item, index) in item" :key="item.id" v-if="index === 0" :to="{name: 'BackPlayer', query: {id: item.id}}">
					<div class="play-mask"></div>
					<div class="player-info">
						<router-link :to="{name: 'User', query: {sellerId: item.seller_id}}">
							<span class="player-img">
                  <img :src="item.avatar" v-if="item.avatar"/>
                  <img src="../assets/img/defaultImg.jpeg" v-else/>
                </span>
						</router-link>
						<span>
                <p class="player-name">{{item.nickname}}</p>
                <p class="player-city"><i class="icon"></i> {{item.address}}</p>
              </span>
					</div>

					<div class="play-tit">{{item.title}}</div>
					<div class="play-time bottomTip" v-if="item.status === 2">
						<!--<div class="playing trailer" >预告</div>-->
						{{formatDate(item.end_time*1000)}}&nbsp;&nbsp;{{item.total_member_num}}人观看
					</div>
					<!--
            <div class="play-love">
              <p class="img-p">
                <img src="../assets/img/livepage_icon.png">
              </p>
              <p>{{item.like_num}}</p>
            </div>
            -->
				</router-link>
			</div>
			<div class="play-row">
				<router-link class="play-item" :style="{ background: 'url('+item.cover_url+') center no-repeat', backgroundSize: '100%'}" :to="{name: 'BackPlayer', query: {id: item.id}}" v-for="(item, index) in item" :key="item.id" v-if="index === 1">
					<div class="play-mask"></div>
					<div class="play-tit">{{item.title}}</div>
					<div class="play-time bottomTip" v-if="item.status === 2" style="font-size:0.55rem;">
						<!--<div class="playing trailer" >预告</div>-->
						{{formatDate(item.end_time*1000)}}&nbsp;&nbsp;{{item.total_member_num}}人观看
					</div>
					<div class="play-time bottomTip" v-if="item.status === 1">
						<div class="playing" v-if="item.status === 1">直播中</div>{{item.totalMemberNum}}人观看
					</div>
				</router-link>

				<router-link class="play-item" :style="{ background: 'url('+item.cover_url+') center no-repeat', backgroundSize: '100%'}" :to="{name: 'BackPlayer', query: {id: item.id}}" v-for="(item, index) in item" :key="item.id" v-if="index === 2">
					<div class="play-mask"></div>
					<div class="play-tit">{{item.title}}</div>
					<div class="play-time bottomTip" v-if="item.status === 2" style="font-size:0.55rem;">
						<!--<div class="playing trailer" >预告</div>-->
						{{formatDate(item.end_time*1000)}}&nbsp;&nbsp;{{item.total_member_num}}人观看
					</div>
					<div class="play-time bottomTip" v-if="item.status === 1">
						<div class="playing" v-if="item.status === 1">直播中</div>{{item.totalMemberNum}}人观看
					</div>
				</router-link>
			</div>
		</div>
	</div>
</div>
</template>

<script>
	import util from '../common/util.js';
	export default {
		data() {
			return {
				backgroundUrl1: '../static/img/back-img.png',
				backgroundUrl2: '../static/img/default_cover.jpg',
				loading: false,
				pageNum: 0,
				total: 0,
				pages: 0,
				hasNextPage: true,
				list: [],
				newList: [],
				params: {
					currentPage: 1,
					pageSize: 10,
					type: 1,
					liveClassId: 1
				},
				playbackUrl: window.playbackUrl //-------------------------------------------------------
			}
		},
		components: {},
		computed: {},
		beforeMount() {

		},
		mounted() {
			/*$("#listTab").removeClass("active");
			$("#backPlayListTab").addClass("active");*/
			this.getList();
		},
		activated() {

		},
		methods: {
			formatDate: util.formatDate1, //------------------------------------------------------
			/**
			 * 获取直播列表
			 */
			getList() {
				if ( !this.hasNextPage ) {
					return;
				}
				this.loading = true;
				this.httpPost( this.API.recordList, this.params ).then( ( res ) => { //---------------------
					if ( res ) {
						this.loading = false;
						let data = res.data;
						this.hasNextPage = data.hasNextPage;
						this.pageNum = data.pageNum;
						this.pages = data.pages;
						this.total = data.total;
						this.list = this.list.concat( data.list );
						this.newList = this.handleList();
						this.params.currentPage++;
					}
				} )
			},

			handleList() {
				let newList = [];
				let arr = [];
				this.list.forEach( ( item, index ) => {
					if ( index % 3 === 0 && index != 0 ) {
						newList.push( arr );
						arr = [];
						arr.push( item );
						if ( index === ( this.list.length - 1 ) ) {
							newList.push( arr );
						}
					} else {
						arr.push( item );
						if ( index === ( this.list.length - 1 ) ) {
							newList.push( arr );
						}
					}
				} )
				return newList;
			},

			/**
			 * 跳转到直播间
			 */
			gotoPlayer( evt, item ) {
				// evt.preventDefault()
				this.$router.push( {
					name: 'Player',
					query: {
						playInfo: JSON.stringify( item )
					}
				} )
			}

		}
	}
</script>

<style lang="scss" scoped></style>